import React, { Component } from 'react';
import { Layout, Spin } from 'antd';
import MergeTable from '../../Common/MergeTable/MergeTable';
import Toolbar from '../../Common/ToolBar/ToolBar';
import SalesOutStandFilter from './SalesOutStandFilter';
import Tree from '../../Common/Tree/Tree';
import styles from '../../../index.less';
import baseHigher from '../../Common/baseHigher';
import * as config from '../../../utils/config';
import * as commonFunc from '../../Common/commonFunc';

const { Header, Content, Sider } = Layout;

class SalesCheckMaster extends Component {
  constructor(props) {
    super(props);
    this.state = {
      btnData: config.btnData, /* 工具栏按钮 */
      masterConfig: { sId: '' }, // 主表 + 从表 配置
      masterData: [],
      selectedRowKeys: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    const { dataList } = nextProps.content;
    const {
      sDataListTabId, formRoute, urlData, paneType, checkedId, disabled,
    } = dataList;
    if (urlData !== undefined && Object.keys(urlData).length > 0 && paneType !== undefined && paneType !== '') {
      const paneKey = new Date().getTime().toString();
      const pane = {
        title: urlData.sMenuName,
        route: urlData.sName,
        formId: urlData.sId,
        checkedId,
        disabled,
        key: paneKey,
      };
      this.props.onAddPane(pane);
    }
    if (nextProps.sTabId === sDataListTabId &&
      nextProps.formRoute === formRoute &&
      nextProps.formData.length > 0 && this.state.masterConfig.sId === '') {
      const masterConfig = commonFunc.getTableConfig('OutStandCommonList', nextProps.formData);
      this.setState({ masterConfig });
    }
  }

  render() {
    const { pageLoading } = this.props;
    return (
      <Spin spinning={pageLoading}>
        {pageLoading ? '' :
        <Layout>
          <Header className={styles.header}>
            <Toolbar {...this.props} {...this.state} onAdd={this.handleAdd} onBtnDel={this.handleDel} onRefresh={this.handleRefresh} componentName="toolCommonList" />
          </Header>
          <Layout className={styles.clayout}>
            <Content>
              <SalesOutStandFilter {...this.props} {...this.state} componentName="fastCommonList" />
            </Content>
          </Layout>
          <Layout className={styles.clayoutBot}>
            <Sider className={styles.sider}>
              <Tree {...this.props} {...this.state} componentName="treeCommonList" config={this.state.masterConfig} />
            </Sider>
            <Content className={styles.content}>
              <MergeTable {...this.props} {...this.state} componentName="OutStandCommonList" config={this.state.masterConfig} />
            </Content>
          </Layout>
        </Layout>}
      </Spin>
    );
  }
}

export default baseHigher(SalesCheckMaster);
